<!-- 评论区组件 --> 
<template>
  <div class="cmt_list">
    <div class="cmt_item" v-for="(items, index) in comment" :key="index">
      <div class="cmt_head">
        <!-- 用户头像 -->
        <router-link class="userphoto" :to="`/userinfo?id=${items.user.userId}`">
          <img :src="items.user.avatarUrl" alt="" />
          <span class="ava-icon ava-icon-daren" v-if="items.user.avatarDetail && items.user.avatarDetail.identityLevel >= 3"></span>
        </router-link>
      </div>
      <div class="cmt_wrap f-bd f-bd-btm">
        <div class="cmt_header">
          <div class="cmt_meta">
            <span class="cmt_user">
              <!-- 用户名字 -->
              <router-link :to="`/userinfo?id=${items.user.userId}`">{{ items.user.nickname }}</router-link>
              <img v-if="items.user.vipRights && items.user.vipRights.associator" style="margin: 0 4px" :src="items.user.vipRights.associator.iconUrl" alt="" height="12" />
              <img
                v-if="items.user.vipRights && !items.user.vipRights.associator && items.user.vipRights.musicPackage"
                style="margin: 0 4px"
                :src="items.user.vipRights.musicPackage.iconUrl"
                alt=""
                height="12"
              />
            </span>
            <div class="cmt_time">{{ dateStr(items.timeStr) }}</div>
          </div>
          <div class="cmt_like">
            <span class="cmt_likearea">
              <span v-if="items.likedCount">{{ num(items.likedCount) }}</span>
              <i class="cmt_likeicn">
                <van-icon name="good-job-o" />
              </i>
            </span>
          </div>
        </div>
        <div class="cmt_content">
          <span class="cmt_text">
            <span v-if="items.beReplied[0]">
              回复
              <span style="color: #507daf" @click="$router.push(`/userinfo?id=${items.beReplied[0].user.userId}`)">@{{ items.beReplied[0].user.nickname }}</span>
              ：
            </span>
            {{ items.content }}
          </span>
        </div>
        <template v-if="items.beReplied[0]">
          <div class="cmt_replied f-bd f-bd-full" v-if="items.beReplied[0].content">
            <span>@{{ items.beReplied[0].user.nickname }}：</span>
            <span class="cmt_replied_cnt">
              <span class="cmt_text">{{ items.beReplied[0].content }}</span>
            </span>
          </div>
          <div class="cmt_replied f-bd f-bd-full" v-else>
            <span>该评论已删除</span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { numberFormat, ConversionTime } from '@/utils/common'
export default {
  props: {
    comment: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    //日期格式化
    dateStr() {
      return (str) => {
        return ConversionTime(str)
      }
    },
    //数字格式化
    num() {
      return (val) => {
        return numberFormat(val)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.cmt_list {
  .cmt_item {
    padding-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    .cmt_head {
      height: 35px;
      margin: 0 10px;
      flex: none;
      .userphoto {
        position: relative;
        display: block;
        color: #507daf;
        text-decoration: none;
        > img {
          display: block;
          border-radius: 50%;
          width: 30px;
          height: 30px;
        }
      }
      > a .ava-icon {
        position: absolute;
        right: -5px;
        bottom: 0;
        width: 12px;
        height: 12px;
        background-image: url('../assets/img/usericn_2x.png');
        background-repeat: no-repeat;
        background-size: 75px auto;
      }
      > a .ava-icon.ava-icon-daren {
        background-position: -40px 0;
      }
    }
    .cmt_head + .cmt_wrap {
      padding-left: 0;
    }
    .cmt_wrap {
      padding-right: 10px;
      padding-bottom: 11px;
      flex: auto;
      width: 0;
      .cmt_header {
        display: flex;
        flex-direction: row;
      }
      .cmt_content {
        color: #333;
        font-size: 15px;
        line-height: 22px;
        margin-top: 5px;
        .cmt_text {
          vertical-align: middle;
        }
      }
      .cmt_meta {
        flex: auto;
        width: 0;
        font-size: 0;
        .cmt_user {
          max-width: 100%;
          display: inline-flex;
          align-items: center;
          > a {
            font-size: 14px;
            color: #666;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: auto;
            text-decoration: none;
          }
        }
        .cmt_time {
          font-size: 9px;
          color: #999;
        }
      }
      .cmt_like {
        width: 65px;
        height: 22px;
        line-height: 22px;
        font-size: 11px;
        color: #999;
        flex: none;
        text-align: right;
        .cmt_likearea {
          display: inline-block;
          min-width: 30px;
          padding-left: 5px;
          > span {
            vertical-align: middle;
          }
          .cmt_likeicn {
            display: inline-block;
            width: 14px;
            height: 22px;
            font-size: 18px;
            margin-left: 6px;
            line-height: 0;
            vertical-align: middle;
            cursor: pointer;
          }
        }
      }
      .cmt_replied {
        margin: 5px 0;
        padding: 10px;
        color: #888;
        font-size: 14px;
        line-height: 21px;
        span:first-child {
          vertical-align: middle;
          color: #888;
          font-size: 14px;
          line-height: 21px;
        }
        .cmt_replied_cnt {
          .cmt_text {
            vertical-align: middle;
          }
        }
      }
    }
    .f-bd-btm {
      border-bottom: 1px solid rgba(226, 226, 227);
    }
  }
}
.f-bd {
  position: relative;
  &:after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    position: absolute;
    z-index: 2;
    content: '';
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    transform-origin: top left;
    border: 0 solid rgba(0, 0, 0, 0.1);
  }
}
.f-bd-full:after {
  border-width: 1px;
}
</style>
